<%@page import="com.cqggrw.util.Utils"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.cqggrw.domain.*"%>
<%@ page import="com.cqggrw.service.*"%>
<%@ page import="com.cqggrw.service.impl.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>公共人物网</title>
</head>
<script type="text/javascript" src="jslib/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/icon.css" type="text/css"></link>
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#big {
	height: 1146px;
	width: 1010px;
	margin-right: auto;
	margin-left: auto;
}
#zbig {
	height: 1146px;
	width: 850px;
	float: left;
}
#zb {
	height: 700px;
	width: 80px;
	float: left;
	padding-top: 446px;
}

</style>
<%
	BookServiceI service = new BookServiceImpl();
	String bookImg = request.getParameter("bookImg");
	String imgs = null;
	if(bookImg != null && bookImg.length()>0) {
		imgs = (String)service.getBookImgName(bookImg, (String)request.getRealPath(""));
	}
 %>
 <script type="text/javascript" language="utf-8">
 	var url = 'images/bookImg/<%=bookImg %>/';
 	var imgs = '<%=imgs %>'.split(',');
 	
 	imgs.sort(sortNumber);
 	var i = 1;
 	var basy = false;
 	
 	function sortNumber(a,b)
 	{
 	return a.split('.')[0] - b.split('.')[0];
 	}
 	
 	function perImg() {
 		if(i == 1) {
 			alert('已经是第一页了');
 		} else {
 			i = i-1;
 			chaImgUrl();
 		}
 	}
 	
 	function nextImg() {
 		if(i == imgs.length) {
 			alert('已经是最后第一页了');
 		} else {
 			i = i+1;
 			chaImgUrl();
 		}
 	}
 	
 	function chaImgUrl() {
 		$('#imgId').attr({'src':url + imgs[i-1]});
 		basy = true;
 		$('#pp').pagination('select', i);
 	}
 	$(function() {
	 	$('#pp').pagination({   
		    total:imgs.length,   
		    pageSize:1,
		    pageNumber:1,
		    showRefresh:false,
		    showPageList : false,
		    pageList: [1],
		    onSelectPage:function(pageNumber, pageSize){
		    	if(basy) {
		    		basy = false;
		    		return false;
		    	}
		    	i = pageNumber;
		    	chaImgUrl();
			}
		});  
	 	chaImgUrl();
 	});
 	
 </script>
<body bgcolor="#7c7c7c">


<div id="big">
  <div id="zb"><input type="image" onclick="perImg();" src="images/z1.jpg" /></div>
  <div id="zbig"><img id="imgId" onclick="nextImg();" /></div>
  <div id="zb"><input type="image" onclick="nextImg();" src="images/z2.jpg" /></div>
</div>
<div align="center"><div style="width: 850px;background-color: red;"><div id="pp" style="background:#efefef;border:1px solid #ccc;"></div></div></div>
</body>
</html>